<template>
  <div class="wuliu">
    <div style="background: #F9F9F9; color: #333; padding: 15px 30px;">商品基础信息</div>
    <div style="padding: 30px 0px 0;">
      <div class="kflexc mb20">
        <div class="kflexc">
          <div class="left1">商品名称</div>
          <div><el-input v-model="all.title" disabled style="width: 300px;" placeholder="请输入商品名称"></el-input></div>
          <div style="margin-left: 20px;"><el-button type="primary" plain round @click="yinyong">直接引用已有商品资料</el-button></div>
        </div>
      </div>
      <div class="kflexc mb20">
        <div class="kflexc">
          <div class="left1">运营商</div>
          <div>
            <el-select v-model="all.operator" disabled style="width: 300px;margin-right: 20px; margin-bottom: 20px;" clearable filterable placeholder="请选择运营商">
              <el-option :label="item.name" :value="item.id" v-for="item in sanlist" :key="item.id"></el-option>
            </el-select>
          </div>
        </div>
        <div class="kflexc">
          <div class="left1">归属地</div>
          <div><el-input v-model="all.location" style="width: 300px;" placeholder="请输入归属地"></el-input></div>
        </div>
      </div>
    </div>
    <div style="background: #F9F9F9; color: #333; padding: 15px 30px;">生产配置</div>
    <div style="padding: 30px 0px 0;">
      <div class="kflexc mb20">
        <div class="kflexc">
          <div class="left1">是否需要身份证照片</div>
          <div>
            <el-radio v-model="all.need_num" disabled :label="1">需要</el-radio>
            <el-radio v-model="all.need_num" disabled :label="0">不需要</el-radio>
          </div>
        </div>
      </div>

      <div class="kflexc mb20" v-if="all.warn_area_type == 1">
        <div class="kflexc">
          <div class="left1">不发货地址：</div>
          <div class="kflexc" style="width:1000px;">
            <div style="margin-right:20px; font-size: 14px;" v-for="(item,index) in all.warn_city" :key="index">
              <div v-for="item2 in Object.keys(item)">{{item2}}/{{item[item2]}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="kflexc mb20" v-if="all.warn_area_type == 2">
        <div class="kflexc">
          <div class="left1">只发货地址：</div>
          <div style="margin-right:20px; font-size: 14px;" v-for="(item,index) in all.deliver_province" :key="index">{{item[0]}}/{{item[1]}}</div>
        </div>
      </div>



      <div class="kflexc mb20">
        <div class="kflexc">
          <div class="left1">年龄限制（周岁）：</div>
          <div v-if="all.max_age">{{all.min_age}}  -  {{all.max_age}}岁</div>
          <div v-if="!all.max_age && !all.min_age">不限制</div>
        </div>
      </div>
      <div class="kflexc mb20">
        <div class="kflexc">
          <div class="left1">单人开卡数量限制：</div>
          <div v-if="all.max_purchase == -1 ">不限制</div>
          <div v-if="all.max_purchase != -1 ">{{all.max_purchase}}</div>
        </div>
      </div>
    </div>
    <div style="background: #F9F9F9; color: #333; padding: 15px 30px;">商品核心信息</div>
    <div style="padding: 30px 0px 0;">
      <div class="kflexc mb20">
        <div class="kflexc">
          <div class="left1">月租</div>
          <div><el-input v-model="all.yz" disabled style="width: 300px;" placeholder="请输入月租"></el-input></div>
        </div>
        <div class="kflexc">
          <div class="left1">语音通话</div>
          <div><el-input v-model="all.yyth" disabled style="width: 300px;" placeholder="请输入语音通话"></el-input></div>
        </div>
      </div>
      <div class="kflexc mb20">
        <div class="kflexc">
          <div class="left1">通用流量</div>
          <div><el-input v-model="all.tyll" disabled style="width: 300px;" placeholder="请输入通用流量"></el-input></div>
        </div>
        <div class="kflexc">
          <div class="left1">定向流量</div>
          <div><el-input v-model="all.dxll" disabled style="width: 300px;" placeholder="请输入定向流量"></el-input></div>
        </div>
      </div>
      <div class="kflexc mb20">
        <div class="kflexc">
          <div class="left1">月租详情</div>
          <div><el-input v-model="all.yzxq" style="width: 300px;" placeholder="请输入月租详情"></el-input></div>
        </div>
      </div>
      <div class="kflexc mb20">
        <div class="kflexc">
          <div class="left1">套外资费</div>
          <div><el-input v-model="all.twzf" style="width: 300px;" placeholder="请输入套外资费"></el-input></div>
        </div>
      </div>
      <div class="kflexc mb20">
        <div class="kflexc">
          <div class="left1">套餐优惠期</div>
          <div><el-input v-model="all.tcyhq" style="width: 300px;" placeholder="请输入套餐优惠期"></el-input></div>
        </div>
      </div>
      <div class="kflexc mb20">
        <div class="kflexc">
          <div class="left1">激活方式</div>
          <div><el-input v-model="all.jhfs" style="width: 300px;" placeholder="请输入激活方式"></el-input></div>
        </div>
        <div class="kflexc">
          <div class="left1">激活时效</div>
          <div><el-input v-model="all.jhsx" style="width: 300px;" placeholder="请输入激活时效"></el-input></div>
        </div>

      </div>
      <div class="kflexc mb20">
        <div class="kflexc">
          <div class="left1">充值方式</div>
          <div><el-input v-model="all.czfs" style="width: 300px;" placeholder="请输入充值方式"></el-input></div>
        </div>
        <div class="kflexc">
          <div class="left1">充值金额</div>
          <div><el-input v-model="all.czje" style="width: 300px;" placeholder="请输入充值金额"></el-input></div>
        </div>
      </div>
      <div class="kflexc mb20">
        <div class="kflexc">
          <div class="left1">销户方式</div>
          <div><el-input v-model="all.xhfs" style="width: 300px;" placeholder="请输入销户方式"></el-input></div>
        </div>
        <div class="kflexc">
          <div class="left1">销户违约金</div>
          <div><el-input v-model="all.xhwyj" style="width: 300px;" placeholder="请输入销户违约金"></el-input></div>
        </div>
      </div>
      <div class="kflexc mb20">
        <div class="kflexc">
          <div class="left1">是否支持5G</div>
          <div><el-input v-model="all.is_5g" style="width: 300px;" placeholder="请输入是否支持5G"></el-input></div>
          <div style="margin-left: 20px;"><el-checkbox v-model="all.is_xc" :true-label="1" :false-label="0">不可宣传</el-checkbox></div>
        </div>
      </div>
      <div class="kflexc mb20">
        <div class="kflexc">
          <div class="left1">商品合约期</div>
          <div><el-input v-model="all.sphyq" style="width: 300px;" placeholder="请输入商品合约期"></el-input></div>
        </div>
      </div>
      <div class="kflexc mb20">
        <div class="kflexc">
          <div class="left1">套餐详细信息</div>
          <fuwenben :description="all.tcxxxx" @fuwenbenfanhui="fuwenbenfanhui" v-if="relo"></fuwenben>
        </div>
      </div>
    </div>
    <div style="background: #F9F9F9; color: #333; padding: 15px 30px;">发货方式</div>
    <div style="padding: 30px 0px 0;">
      <div class="kflexc mb20">
        <div class="kflexc">
          <div class="left1">物流方式</div>
          <div><el-input v-model="all.wlfs" style="width: 300px;" placeholder="请输入物流方式"></el-input></div>
        </div>
        <div class="kflexc">
          <div class="left1">发货时效</div>
          <div><el-input v-model="all.fhsx" style="width: 300px;" placeholder="请输入发货时效"></el-input></div>
        </div>
        <div class="kflexc">
          <div class="left1">数据回传</div>
          <div><el-input v-model="all.sjhc" style="width: 300px;" placeholder="请输入数据回传"></el-input></div>
        </div>
      </div>
    </div>
    <div style="background: #F9F9F9; color: #333; padding: 15px 30px;">销售平台</div>
    <div style="padding: 30px 0px 0;">
      <div class="kflexc mb20">
        <div class="kflexc">
          <div class="left1">销售平台</div>
          <div><el-input v-model="all.xspt" style="width: 300px;" placeholder="请输入物销售平台"></el-input></div>
        </div>
      </div>
    </div>
    <div style="background: #F9F9F9; color: #333; padding: 15px 30px;">选号模式</div>
    <div style="padding: 30px 0px 0;">
      <div class="kflexc mb20">
        <div class="kflexc">
          <div class="left1">支持地区</div>
          <div><el-input v-model="all.zcdq" style="width: 300px;" placeholder="请输入支持地区"></el-input></div>
        </div>
        <div class="kflexc">
          <div class="left1">检索规则</div>
          <div><el-input v-model="all.jsgz" style="width: 300px;" placeholder="请输入检索规则"></el-input></div>
        </div>
        <div class="kflexc">
          <div class="left1">天猫号池</div>
          <div><el-input v-model="all.tmhc" style="width: 300px;" placeholder="请输入天猫号池"></el-input></div>
        </div>
      </div>
    </div>
    <div style="background: #F9F9F9; color: #333; padding: 15px 30px;">其他</div>
    <div style="padding: 30px 0px 0;">
      <div class="kflexc mb20">
        <div class="kflexc">
          <div class="left1">上传附件</div>
          <file ref="chuantu" @getimg="getimg" :imgs="all.fu_jian" v-if="relo"></file>
        </div>
      </div>
      <div class="kflexc mb20">
        <div class="kflexc">
          <div class="left1">上传图片</div>
          <chuantu ref="chuantu2" @getimg="getimg2" :imgs="all.zl_image" v-if="relo"></chuantu>
        </div>
      </div>
    </div>
    <div class="kflexcc" style="padding: 20px 0;" v-if="$route.query.bianji"><el-button type="danger" round @click="baocun">保存</el-button></div>


    <el-dialog title="选择商品" :visible.sync="log" width="440px" :close-on-click-modal="false" :close-on-press-escape="false">
      <div>
        <el-select v-model="yinyong_id" style="width: 300px;margin-right: 20px; margin-bottom: 20px;" clearable filterable placeholder="商品编码/商品名称">
          <el-option :label="item.fetch_code + '  /  ' + item.title" :value="item.id" v-for="item in yinyong_list" :key="item.id"></el-option>
        </el-select>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button round @click="log = false">取消</el-button>
        <el-button type="danger" round @click="addgo">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import chuantu from "@/components/zujian/chuantu.vue";
  import file from "@/components/zujian/file.vue";

  import fuwenben from "@/components/fuwenben/fuwenben.vue";
  import axios from 'axios'
  import moment from "moment";
  import XLSX from 'xlsx';
  import {
      read,utils
    } from 'xlsx'

  export default {
    components:{
      chuantu,fuwenben,file
    },
    name: "wuliu",
    data() {
      return {
        log:false,
        yinyong_id:"",
        yinyong_list:[],
        sanlist: [
         //  {name: "中国联通",	id: 10010},
        	// {name: "中国移动",	id: 10086},
        	// {name: "中国电信", id: 10000},
        	{name: "中国广电", id:10099},
        	// {name: "虚拟运营商",id: 11111}
        ],
        all:{
            "id": "",
            "shop_id": "",
            "order_id": "",
            "product_id": "",
            "yz": "",
            "yyth": "",
            "tyll": "",
            "dxll": "",
            "twzf": "",
            "tcyhq": "",
            "jhfs": "",
            "czfs": "",
            "xhfs": "",
            "xhwyj": "",
            "is_5g": "",
            "is_xc": "",
            "sphyq": "",
            "tcxxxx": "",
            "wlfs": "",
            "fhsx": "",
            "sjhc": "",
            "xspt": "",
            "zcdq": "",
            "jsgz": "",
            "tmhc": "",
            "fu_jian": "",
            "zl_image": "",
            "location": "",
            "title": "",
            "play_info": "",
            "alert_info": "",
            "yy_image": "",
            "created_at": "",
            "updated_at": "",
            "update_by": "",
            "is_update": "",
            "del_flag": "",
            "release_time": "",
            "info_id": "",
            "operator": "",
            "province": "",
            "city": "",
            "need_num": 1,
            "warn_area_type": 1,
            // "warn_province": "",
            // "warn_city": "",
            // "deliver_province": "",
            "min_age": 0,
            "max_age": 65,
            "max_purchase": -1,
            czje:"",
            jhsx:"",
            yzxq:""
        },
        relo:true
      }
    },
    created() {
      //店铺权限问题
			// this.shopid = JSON.parse(localStorage.getItem('SHOP')).shop_id;
      // this.getlist()

      this.getlist()

      axios.get('/api/gth/information/list',{params:{
        page:1,
        _page_size:2000,
        status: 100,
      }})
        .then(response => {
          if (response.data.msg.code == 0) {
            this.yinyong_list = response.data.data.data
          } else {
            this.$message.error(response.data.msg.info);
          }
        })

    },
    mounted() {

    },
    methods: {
      yinyong:function(){
        this.yinyong_id = ""
        this.log = true
      },
      addgo:function(){

        axios.get('/api/gth/information/findInfoWithId?id='+this.yinyong_id)
          .then(response => {
            if (response.data.msg.code == 0) {

              this.all.yz = response.data.data.yz
              this.all.yyth = response.data.data.yyth
              this.all.tyll = response.data.data.tyll
              this.all.dxll = response.data.data.dxll
              this.all.yzxq = response.data.data.yzxq
              this.all.twzf = response.data.data.twzf
              this.all.tcyhq = response.data.data.tcyhq
              this.all.jhfs = response.data.data.jhfs
              this.all.jhsx = response.data.data.jhsx
              this.all.czfs = response.data.data.czfs
              this.all.czje = response.data.data.czje
              this.all.xhfs = response.data.data.xhfs
              this.all.xhwyj = response.data.data.xhwyj
              this.all.is_5g = response.data.data.is_5g
              this.all.sphyq = response.data.data.sphyq
              this.all.tcxxxx = response.data.data.tcxxxx
              this.all.wlfs = response.data.data.wlfs
              this.all.fhsx = response.data.data.fhsx
              this.all.sjhc = response.data.data.sjhc
              this.all.xspt = response.data.data.xspt
              this.all.zcdq = response.data.data.zcdq
              this.all.jsgz = response.data.data.jsgz
              this.all.tmhc = response.data.data.tmhc
              this.all.fu_jian = response.data.data.fu_jian
              this.all.zl_image = response.data.data.zl_image
              this.all.is_xc = response.data.data.is_xc

              this.log = false

              this.relo = false
              this.$nextTick(()=>{
                this.relo = true
              })
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      getlist:function(){
        axios.get('/api/gth/information/findInfoWithId?id='+this.$route.query.id)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.all = response.data.data

              this.relo = false
              this.$nextTick(()=>{
                this.relo = true
              })

            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      fuwenbenfanhui:function(html){
        this.all.tcxxxx = html
      },
      getimg:function(img){
        this.all.fu_jian = img
        if(img){
          this.$message.success('上传成功');
        }
        this.relo = false
        this.$nextTick(()=>{
          this.relo = true
        })
      },
      getimg2:function(img){
        this.all.zl_image = img
        if(img){
          this.$message.success('上传成功');
        }
      },

      baocun:function(){
        axios.post('/api/gth/information/saveOrUpdateWithId',this.all)
        .then(response => {
          if (response.data.msg.code == 0) {
            this.$message.success('保存成功');
            this.$router.back(-1)
          } else {
            this.$message.error(response.data.msg.info);
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .left1{width: 165px; text-align: right; margin-right: 20px; color: rgb(102, 102, 102); font-size: 14px;}
</style>
